
import React, { useState } from 'react'
import { Board } from '../../component'
import { calculateWinner, showColumnAndRow } from '../../utils/calculateWinner'
import '../../css/game.css'
const Game = () => {
    const [history, setHistory] = useState([{ squares: Array(9).fill(null) }])
    const [stepNumber, setStepNumber] = useState(0)
    const [xIsNext, setXIsNext] = useState(true)
    const [columnRowString, setColumnRowString] = useState([])
    const [isReverse, setIsReverse] = useState(false);


    const handleClick = (i) => {
        const historys = history.slice(0, stepNumber + 1);
        const current = historys[historys.length - 1];
        const squares = current.squares.slice();
        const columnRowStrings = columnRowString.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        columnRowStrings.push(showColumnAndRow(i))
        squares[i] = xIsNext ? "X" : "O";
        setHistory(history.concat([{ squares }]))
        setStepNumber(historys.length)
        setXIsNext(!xIsNext)
        setColumnRowString(columnRowStrings)
    }

    const jumpTo = (step) => {
        setStepNumber(step)
        setXIsNext((step % 2) === 0)
        if (!step) {
            setColumnRowString([]);
            setHistory([{squares: Array(9).fill(null)}])
        }
    }

    const needReverse = (isUp) => {
        setIsReverse(isUp === 1 ? false : true)
    }
    const current = history[stepNumber];
    console.log(current,'current')
    const winner = calculateWinner(current?.squares);
    const moves = history.map((step, move) => {
        const desc = move ?
            `Go to move #  ${move} , ${columnRowString[move - 1]}` :
            'Go to game start';
        return (
            <li key={move} className={stepNumber === move && move !== 0 ? 'boldFont' : ''}>
                <button onClick={() => jumpTo(move)} className={stepNumber === move && move !== 0 ? 'boldFont' : ''}>
                    {desc}
                </button>
            </li>
        );
    });

    let status;
    if (winner) {
        status = "Winner: " + winner;
    } else if (!current.squares.includes(null)) {
        status = 'no one win!'
    } else {
        status = "Next player: " + (xIsNext ? "X" : "O");
    }


    return (
        <div className="game">
            <div className="game-board">
                <Board
                    squares={current.squares}
                    onClick={i => handleClick(i)}
                />
            </div>
            <div className="game-info">
                <div>{status}</div>
                <ol>{isReverse ? moves.reverse() : moves}</ol>
            </div>
            <div className='orderButtonGroup'>
                <div>
                    <button className='oderButton' onClick={() => needReverse(1)}>升序</button>
                </div>

                <div>
                    <button className='oderButton' style={{ marginTop: '6px' }} onClick={() => needReverse(0)}>降序</button>
                </div>
            </div>

            <div className='orderButtonGroup'> 当前状态:  {!isReverse ? '升序' : '降序'} </div>
        </div>
    );
}
export default Game